@import url('../css2');

.gloria {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lucky {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.single {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
} 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: #6A1FFD;
}

.body {
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: black;
}

li {
    list-style: none;
}

html {
    scroll-behavior: smooth;
    line-height: 100%;
}

h1 {
    font-size: 4.5vw;
    line-height: 100%;
    gap: .5vw;
    color: white;
}

h1 img {
    width: 4vw;
}

h2 {
    font-size: 1.5vw;
    line-height: 100%;
    gap: .5vw;
    color: white;
}

h2 img {
    width: 1.5vw;
}

h3 {
    font-size: 2vw;
    line-height: 100%;
    color: #EDB623;
}

p {
    font-size: 1.5vw;
    line-height: 120%;
    color: white;
}

.btn {
    font-size: 1.4vw;
    padding: .7vw 2.5vw;
    background-color: #B4FC55;
    border: .2vw solid;
    border-color: black;
    transform: rotateZ(4deg);
    transition: all .2s;
}

.btn:hover {
    background-color: white !important;
    /* border-color: white; */
    transform: rotateZ(0deg);
}

.btn1 {
    padding: .5vw 1vw;
    background: black;
    border-radius: .7vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5vw;
    font-size: 1.2vw;
    line-height: normal;
    color: white;
    font-family: "Roboto", sans-serif;
    transition: all .2s;
}

.btn1 .arrow {
    width: 1.2vw;
}

.btn1:hover {
    filter: invert(100%);
}

/*--------------- hero -------------*/

.hero {
    width: 100%;
    height: 55vw;
    background: #F4C524;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* justify-content: space-between; */
    padding-bottom: 7vw;
    position: relative;
    padding-top: 15vw;
}

.hero nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vw 5vw;
    position: absolute;
    top: 0;
}

.hero .logo img {
    width: 15vw;
}

.hero nav .right-side {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.hero nav .right-side .links {
    display: flex;
    align-items: center;
    gap: .5vw;
}

.hero nav .right-side .links a img {
    width: 3vw;
}

.hero nav .right-side .links a img:hover {
    filter: invert(100%);
    transition: all .2s;
}

.hero nav .btn {
    background-color: #B4FC55;
}

.hero .heading {
    width: 50%;
    z-index: 3;
    position: absolute;
    top: 15vw;
    animation: shakeY 15s infinite;
}

.hero .hero-img {
    width: 20%;
    position: absolute;
    z-index: 2;
    animation: rotate 3.5s infinite linear forwards;
}

.hero .hero-bg {
    width: 45%;
    position: absolute;
    z-index: 1;
    animation: scale 1.5s infinite alternate-reverse;
}

.hero .gif1 {
    position: absolute;
    width: 10vw;
    top: 15vw;
    left: 7vw;
}

.hero .gif2 {
    position: absolute;
    width: 25vw;
    bottom: 0;
    left: -5vw;
}

.hero .gif3 {
    position: absolute;
    width: 10vw;
    top: 20vw;
    right: 7vw;
}

.hero .gif4 {
    position: absolute;
    width: 8vw;
    bottom: 0;
    right: 4vw;
}

@keyframes scale1 {
    from {
        transform: scale(1) rotateZ(0deg);
    }
    to {
        transform: scale(0) rotateZ(360deg);
    }
}

/* ----------------------CA--------------
---- */
.ca {
    text-align: center;
    position: absolute;
    z-index: 4;
    bottom: 3vw;
}
.c-4{
    position: absolute;
    width: 3vw;
    top: 3vw;
    left: 10vw;
    animation: float 5s ease-in-out infinite alternate;
}
.ca .btn-group {
    display: flex;
    align-items: center;
    position: absolute;
    top: -8vw;
    right: 0vw;
}
.ca .btn-group a:nth-child(2) img{
    margin-top: 1.6vw;
}
.ca .btn-group a img {
    width: 10vw;
    transition: all .3s;
}
.ca .btn-group a img:hover {
    transform: translateY(-3px);
    filter: drop-shadow(10px 20px rgba(0, 0, 0, 0.2));
}
.ca div input{
    width: 50vw;
    background: #EAFF15;
    padding: 1.5vw 2vw;
    border: 3px solid #000;
    transform: skewY(-2.35deg);
    margin-top: -3vw;
    color: #000;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
    font-size: 1.2vw;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 130% */
}

.strip {
    background-color: #4BF8E3;
    padding: .5vw;
    border: .2vw solid black;
    border-left: none;
    border-right: none;
    margin-bottom: -.5vw;
}

.strip p {
    line-height: 100%;
    color: black;
}

/* ----------------about---------------- */

.about {
    width: 100%;
    height: auto;
    background: #EC77FF;
    background-size: 100% 100%;
    background-position: top center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7vw 5vw;
    padding-bottom: 5vw;
}
.about .left {
    width: 40%;
    text-align: right;
    position: relative;
}

.about .left img {
    width: 80%;
}



.about .right {
    width: 50%;
    padding-right: 5vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2vw;
}

.about .right p {
    color: black;
}

.about .right h1 {
    color: black;
    -webkit-text-stroke: 1px #FFC700;
    text-stroke: 1px #FFC700;
}

/* -----------tokenomics---------- */

.tokenomics {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #4BFFE9;
    text-align: center;
    gap: 4vw;
    padding: 5vw 12vw;
    margin-top: -1vw;
    position: relative;
}

.tokenomics h1 {
    color: #124CE1;
}

.tokenomics h1 img {
    animation: scale 2s infinite alternate-reverse;
    transform-origin: bottom center;
}

@keyframes scale {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.tokenomics .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.tokenomics .content .box {
    width: 22%;
    padding: .7vw;
    border: .25vw solid rgb(0, 0, 0);
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1.5vw;
}

.tokenomics .content .box h2:nth-child(1) {
    color: #1F43FD;
    background: #F5C844;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    padding: .3vw 0;
    padding-bottom: 0vw;
}

.tokenomics .content .box h2:nth-child(2) {
    color: black;
}

.tokenomics .content1 {
    padding: 0 5vw;
}

.tokenomics .content1 img {
    width: 27%;
}

.tokenomics .content1 img:nth-child(2) {
    width: 38%;
}



/*------------- roadmap ---------------*/

.map {
    width: 100%;
    padding: 5vw 15vw;
    background-color: #68B7FF;
    margin-top: -1.5vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3vw;
}

.map .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.map h1 {
    color: #FFF500;
}

.map h1 img {
    animation: rotate 1s infinite linear forwards;
    transform-origin: center;
}

@keyframes rotate {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

.map .content .box {
    width: 30%;
    background-color: #6A1FFD;
    border: .2vw solid #6A1FFD;
    border-radius: 2vw;
    padding: 2.5vw 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5vw;
    box-shadow: 0 0 2.5vw rgba(156, 106, 255, 0.89);
}

.map .content .box h3 {
    color: white;
}


/* ------------------partners------------
---------- */

.partners {
    width: 100%;
    height: auto;
    padding: 5vw 15vw;
    text-align: center;
    background-color: #68B7FF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    position: relative;
}

.partners h1 {
    color: black;
}

.partners h1 img {
    animation: shakeY 1.5s infinite;
}

.partners .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 2vw;
    row-gap: 2vw;
}

.partners .content img {
    width: 18%;
}

/*------------------- join -------------
--------*/

.join {
    width: 100%;
    background: #00001C;
    padding: 5vw 15vw;
    padding-bottom: 1vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    margin-top: -.2vw;
    position: relative;
}

.join h1 img {
    animation: shakeX 2s infinite;
}

.join .btn2 {
    display: flex;
    align-items: center;
    gap: .5vw;
    font-size: 1.2vw;
    color: #050505;
    background: #04FC8F;
    border-radius: 1.5vw;
    padding: 2vw;
    box-shadow: 0 0 1.1vw rgba(4, 252, 143, 0.74);
    transition: all .2s;
}

.join .btn2:hover {
    filter: invert(100%);
}

.join .btn2 img {
    width: 1.2vw;
}

footer {
    text-align: center;
}

footer h1 {
    color: #F8D84B;
}

footer h1 img {
    margin: 0 -.5vw;
    animation: bounce 1s infinite !important;
}

footer .links {
    padding-top: 2vw;
    display: flex;
    align-items: center;
    gap: 1vw;
    justify-content: center;
}

footer .links a img {
    width: 3vw;
    transition: all .2s;
}

footer .links a img:hover {
    filter: invert(100%);
}

.copy {
    width: 100%;
    background: #000E17;
    padding: 1vw 10vw;
    text-align: center;
}

.copy p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.3vw;
}

/*---------------- website responsive -----------
------------*/

@media(max-width:600px) {
    h1 {
        font-size: 8vw;
    }
    
    h1 img {
        width: 8vw;
    }
    
    h2 {
        font-size: 3.5vw;
    }
    
    h2 img {
        width: 3.5vw;
    }
    
    h3 {
        font-size: 3.5vw;
    }
    
    p {
        font-size: 3.2vw;
    }
    
    .btn {
        font-size: 3.6vw;
        padding: 1.3vw 4vw;
        border: .5vw solid;
    }
    
    .btn1 {
        padding: 1.3vw 4vw;
        border-radius: 1.5vw;
        gap: 1vw;
        font-size: 3.2vw;
    }
    
    .btn1 .arrow {
        width: 3.2vw;
    }
    
    
    /*--------------- hero -------------*/
    
    .hero {
        width: 100%;
        height: 120vw;
    }
    
    .hero nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1vw 3vw;
        position: absolute;
        top: 2vw;
    }
    
    .hero .logo img {
        width: 25vw;
    }
    

    .hero nav .right-side {
        display: flex;
        align-items: center;
        gap: 1vw;
    }
    
    .hero nav .right-side .links {
        display: flex;
        align-items: center;
        gap: 1.5vw;
    }
    
    .hero nav .right-side .links a img {
        width: 7vw;
    }
    
    .hero nav .right-side .links a img:hover {
        filter: invert(100%);
        transition: all .2s;
    }
    
    .hero nav .btn {
        background-color: #B4FC55;
    }
    
    .hero .heading {
        width: 70%;
        z-index: 3;
        position: absolute;
        top: 38vw;
    }
    
    .hero .hero-img {
        width: 40%;
        position: absolute;
        z-index: 2;
    }
    
    .hero .hero-bg {
        width: 80%;
        position: absolute;
        z-index: 1;
    }
    
    .hero .gif1 {
        position: absolute;
        width: 15vw;
        top: 15vw;
        left: 7vw;
    }
    
    .hero .gif2 {
        position: absolute;
        width: 35vw;
        bottom: 0;
        left: -5vw;
        z-index: 5;
    }
    
    .hero .gif3 {
        position: absolute;
        width: 15vw;
        top: 20vw;
        right: 7vw;
    }
    
    .hero .gif4 {
        position: absolute;
        width: 13vw;
        bottom: 0;
        right: 4vw;
    }
    
    .strip {
        background-color: #4BF8E3;
        padding: 2vw;
        border: .4vw solid black;
        border-left: none;
        border-right: none;
    }
    
    .strip p {
        line-height: 100%;
        color: black;
    }

    /* ----------------------CA--------------
---- */
.ca {
    text-align: center;
    /* position: relative; */
    bottom: 20vw;
}
.c-4{
    position: absolute;
    width: 4vw;
    top: 3vw;
    left: 5vw;
}
.ca .btn-group {
    display: flex;
    align-items: center;
    position: absolute;
    top: -12vw;
    right: 0vw;
}
.ca .btn-group a:nth-child(2) img{
    margin-top: 1.6vw;
}
.ca .btn-group a img {
    width: 20vw;
}
.ca div input{
    width: 74vw;
    background: #EAFF15;
    padding: 1.5vw 2vw;
    border: 2px solid #000;
    transform: skewY(-2.35deg);
    margin-top: -3vw;
    color: #000;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
    font-size: 2.2vw;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 130% */
}
    
    /* ----------------about---------------- */
    
    .about {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-between;
        padding: 10vw 5vw;
        padding-bottom: 5vw;
        gap: 10vw;
        margin-top: -.7vw;
    }
    .about .left {
        width: 70%;
        text-align: center;
        position: relative;
    }
    
    .about .left img {
        width: 100%;
    }
    
    
    .about .right {
        width: 100%;
        padding-right: 5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3vw;
    }
    
    /* -----------tokenomics---------- */
    
    .tokenomics {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 9vw;
        padding: 9vw 8vw;
    }
    
    .tokenomics .content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        row-gap: 7vw;
        justify-content: space-between;
    }
    
    .tokenomics .content .box {
        width: 48%;
        padding: .7vw;
        border-radius: 1vw;
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 2.5vw;
    }
    
    .tokenomics .content .box h2:nth-child(1) {
        padding: 1vw 0;
        padding-bottom: .75vw;
    }

    .tokenomics .content1 {
        padding: 0 5vw;
        justify-content: center;
        column-gap: 5vw;
        padding: 0;
        /* align-items: center; */
    }
    
    .tokenomics .content1 img {
        width: 45%;
        border-radius: 2vw;
    }
    
    .tokenomics .content1 img:nth-child(2) {
        width: 45%;
    }
    

    
    /*------------- roadmap ---------------*/
    
    .map {
        width: 100%;
        padding: 10vw 15vw;
        margin-top: -1.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 7vw;
    }
    
    .map .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7vw;
        justify-content: space-between;
    }
    
    .map .content .box {
        width: 100%;
        background-color: #6A1FFD;
        border: .2vw solid #6A1FFD;
        border-radius: 5vw;
        padding: 5vw 4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3vw;
        box-shadow: 0 0 2.5vw rgba(156, 106, 255, 0.89);
    }
    
    .map .content .box h3 {
        color: white;
        font-size: 7vw;
    }
    
    /* ------------------partners------------
    ---------- */
    
    .partners {
        width: 100%;
        height: auto;
        padding: 9vw 5vw;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2vw;
        position: relative;
    }
    
    .partners h1 {
        color: black;
    }
    
    .partners .content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 5vw;
        row-gap: 5vw;
    }
    
    .partners .content img {
        width: 27%;
    }
    
    /*------------------- join -------------
    --------*/
    
    .join {
        width: 100%;
        padding: 10vw 7vw;
        padding-bottom: 3vw;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3vw;
        margin-top: -.2vw;
        position: relative;
    }
    
    .join .btn2 {
        display: flex;
        align-items: center;
        gap: 1vw;
        font-size: 3vw;
        color: #050505;
        background: #04FC8F;
        border-radius: 1.5vw;
        padding: 2vw;
        box-shadow: 0 0 1.1vw rgba(4, 252, 143, 0.74);
        transition: all .2s;
    }
    
    .join .btn2:hover {
        filter: invert(100%);
    }
    
    .join .btn2 img {
        width: 3vw;
    }
    
    footer {
        text-align: center;
        padding-top: 8vw;
    }
    
    footer h1 img {
        margin: 0 -.5vw;
    }
    
    footer .links {
        padding-top: 4vw;
        display: flex;
        align-items: center;
        gap: 3vw;
        justify-content: center;
    }
    
    footer .links a img {
        width: 7vw;
        transition: all .2s;
    }
    
    footer .links a img:hover {
        filter: invert(100%);
    }
    
    .copy {
        width: 100%;
        background: #000E17;
        padding: 3vw 5vw;
        text-align: center;
    }
    
    .copy p {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 3.3vw;
    }
}